<template>
  <div v-if="commentsInfo">

    <!-- alert -->
    <v-alert
      class="alert"
      outlined
      type="success"
      text
      v-show="showSuccessDialog"
      transition="scroll-y-transition"
    >
      课程创建成功！
    </v-alert>
    <!-- alert -->
    <v-alert
      class="alert"
      outlined
      type="warning"
      text
      v-show="showFailDialog"
      transition="scroll-y-transition"
    >
      出了点小问题哦……
    </v-alert>

    <v-container>
      <v-banner>
        {{ courseInfo.name }} 的讨论区
      </v-banner>
    </v-container>

    <div class="text-end">
      <v-dialog
          v-model="dialog"
          persistent
          max-width="600px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
            class="text-start"
          >
            发布新帖子！
          </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="text-h5">发布新帖子</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    label="标题"
                    v-model="commentsInfo.title"
                    required
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="副标题"
                    v-model="commentsInfo.subTitle"
                    required
                  ></v-text-field>
                </v-col>
                <v-col cols>
                  <v-textarea
                    label="帖子内容"
                    v-model="commentsInfo.abstraction"
                    required
                  >
                  </v-textarea>
                </v-col>
              </v-row>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                color="blue darken-1"
                text
                @click="dialog = false"
            >
              Close
            </v-btn>
            <v-btn
                color="blue darken-1"
                text
                @click="submit"
            >
              Save
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-btn
          class="ma-2"
          outlined
          color="indigo"
          @click="selectByCreate"
      >
        按发布时间排序
      </v-btn>
      <v-btn
          class="ma-2"
          outlined
          color="indigo"
          @click="selectByUpdate"
      >
        按最新回复排序
      </v-btn>
    </div>


    <v-container >
      <v-row>
        <v-col
            v-for = "item in pageList"
            :key="item.id"
            cols="12"
        >
          <v-card height="300" style="text-overflow: clip">
            <v-card-title v-if="item">
              {{ item.title }}
            </v-card-title>
            <v-card-subtitle v-if="item">
              {{ item.subTitle }}
            </v-card-subtitle>

            <v-textarea
              v-if="item"
              v-model="item.abstraction"
              no-resize
              filled
              width="80%"
              height="120"
              readonly
            ></v-textarea>
            <v-card-text v-if="item">
              发帖时间： {{ item.createTime }}
              更新时间： {{ item.updateT }}
              发帖人：{{ item.uname }}
            </v-card-text>
            <v-card-text>

            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <v-pagination
      v-model="currentPage"
      :length="pageCount"
      circle
    ></v-pagination>
  </div>
</template>

<script>
import { getCourseById } from "@/api/course";
import { getComments, createComments } from "@/api/comments"

export default {
  name: "Comments",
  data() {
    return {
      commentsInfo: {
        title: "",
        subTitle: "",
        abstraction: "",
        courseId: 0,
        uid: 0,
        uname: ""
      },
      dialog: false,
      courseInfo: {},
      commentsList: [],
      showSuccessDialog: false,
      showFailDialog: false,
      selectRule: "0",
      currentPage: 1,
      pageSize: 4,
    };
  },


  computed: {
    pageList() {
      //console.log("length: "+this.commentsList.length);
      //console.log("page_count:"+this.pageCount);
      //console.log(this.commentsList);
      let ret = [];
      const { currentPage, pageSize } = this;
      console.log("curr:" + this.currentPage + " pageNum: " + this.pageCount);
      for (let i=(currentPage-1)*pageSize; i<currentPage*pageSize && i<this.commentsList.length; i++) {
        ret.push(this.commentsList[i]);
      }
      //console.log("len: "+ret.length);
      //console.log("pageList_time: " + this.pageCount);
      return ret;
    },

    pageCount() {
      //
      if (this.commentsList.length === 0) {
        return 1;
      } else {
        return Math.ceil(this.commentsList.length / this.pageSize);
      }
    }
  },

  methods: {

    selectByUpdate() {
      //console.log("updateButton is clicked!");
      this.selectRule = "2";
      this.loadAllComments();
    },

    selectByCreate() {
      //console.log("createButton is clicked");
      this.selectRule = "1";
      this.loadAllComments();
    },

    submit() {
      const { courseId } = this.$route.params;
      const uid = window.localStorage.getItem("userId");
      const uname = window.localStorage.getItem("username");
      const payload = {
        ...this.commentsInfo,
        uid: uid,
        uname: uname,
        courseId: courseId
      };
      //console.log(payload);
      createComments(payload).then(res => {
        //console.log(res);
        if (res.code === 1) {
          this.showSuccessDialog = true;
          setTimeout(() => {
            this.showSuccessDialog = false;
          }, 1000);
        } else {
          this.showFailDialog = true;
          this.msg = res.msg;
          setTimeout(() => {
            this.showFailDialog = false;
          }, 1000);
        }
      });
      this.dialog = false;
      window.location.reload();
    },

    loadCourse() {
      const { courseId } = this.$route.params;
      const uid = window.localStorage.getItem("userId");
      getCourseById({ uid, courseId }).then(res => {
        this.courseInfo = res;
      });
    },

    loadAllComments() {
      const { courseId } = this.$route.params;
      //console.log(this.selectRule);
      const selectRule = this.selectRule;
      //console.log(selectRule);
      getComments({ courseId, selectRule }).then(res => {
        this.commentsList = res;
        console.log("load finish");
      })
      // console.log("tag");
      // console.log(this.commentsList);
    },

  },

  mounted() {
    this.loadCourse();
    this.loadAllComments();
    console.log("mounted finish");
  }
};
</script>

<style scoped>

</style>
